<template>
	<view class="scroll-row-item course" :class="'course-'+ type">
		<view class="position-relative">
			<image :src="item.cover" mode="widthFix"></image>
			<view class="text-white font-sm">{{formatType}}</view>
		</view>
		<view class="flex flex-column flex-shrink">
			<text class="text-ellipsis font-md ">{{item.title}}</text>
			<view class="font-sm text-light-muted my-1">10人已抢</view>
			<view class="flex flex-1 align-end">
				<text class="font-md text-danger">{{item.price}}</text>
				<text class="font-sm text-light-muted">{{item.t_price}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	let opt = {
		media: '图文',
		audio: '音频',
		video: '视频',
		column: '专栏'
	}
	export default {
		name:"course-list",
		props: {
			item: Object,
			type: {
				type: String,
				default: 'two'
			}
		},
		
		data() {
			return {
				
			};
		},
		computed: {
		  formatType() {
			let type = this.item.type
		    return opt[type]
		  }
		}
		
	}
</script>

<style>
.course{
	
}
.course-two{
	width: 340rpx;
	margin-left: 20rpx;
	margin-bottom: 20rpx;
}
.course-two image, .course-two>view:first-child{
	width: 340rpx;
	height: 180rpx;
}
.course-two>view:last-child>text:first-child {
	margin-top: 10rpx;
}
.course>view:first-child>view {
	position: absolute;
	right: 10rpx;
	bottom: 10rpx;
	background-color: rgba(0, 0, 0, 0.4) ;
	padding: 0 20rpx;
}
.course-one {
	display: flex !important;
	padding: 20rpx;
}
.course-one>view:first-child {
	margin-right: 20rpx;
}
.course-one image, .course-one>view:first-child {
	width: 300rpx;
	height: 170rpx;
	flex-shrink: 1;
}
</style>